最近公司的EIP專案有個需求。主管在簽核一覽表裡會點擊要簽核的單子另開一個視窗，需求單位希望主管簽完的當下馬上自動更新一覽表裡的簽核狀態。

最簡單的解法就是重整頁面(window.load)，此時因為重打API就會得到更新後的簽核狀態。或是也可以直接用Angular的output去觸發更新狀態（我們公司的前端框架是用Angular）。但在這裡除了要保留是一覽表裡的頁數、搜尋條件等等，而且要簽核的單子來自於不同的網域。因此，在這個機緣就認識了postMessage好朋友啦～

使用時機

需要跨網域傳值時使用

基本寫法

父視窗：

• window.open('子視窗的網址', 'blank');
• 接收到訊息後要做的動作

子視窗：

• 設定一個全域變數(ex:opener)
• window.opener.postMessage(要傳送的值,’傳給特定網址’)

程式碼範例(以Angular為前端框架)

    // 父視窗- list.ts   
    export class ListComponent implements OnInit, AfterViewInit {
    // 打開表單
    openSheet(link: string) {
        window.open(link, '_blank');
    }   
 
   // 接收到訊息後的動作- 寫在全域變數
   @HostListener('window:message', ['$event'])
    onMessage(event: MessageEvent): void {
        console.log('成功觸發：查看event.data值:', event.data);
        if (event.data === 'reload') {
            console.log('通過判斷，準備重刷表單資料getRowData()');
            this.getData();
        };
    };
    }

    // 子視窗- ApprovePage.ts   
    export class ApprovePageComponent implements OnInit {
    opener;
 
 
    // 呼叫抽單API
    callAbortAPI(type: string) {
    this._ForgetDutyService.cancelApply(this.abortPara).subscribe(res => {
        if (res.status === "打API成功") {
            console.log(this.opener);  		 // 檢查opener真的有值
            if (this.opener) {
                window.opener.postMessage('reload', '*'); // 更新一覽表
            };
            };
        });
    }
    }

服用前的溫馨提醒

1. 一定要從父視窗用 window.open() 的方式打開子視窗的頁面，不然 postMessage is undefined 的錯誤訊息
2. 也可以傳物件歐

 window.opener.postMessage({data:'reload',status:'success'}, '*'); // 通知父視窗(更新一覽表)

相關文章

在純JS使用=>
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
https://xyz.cinc.biz/2014/05/html5-postmessage-text.html
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/137962/
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

在Angular使用=>
https://www.tpisoftware.com/tpu/articleDetails/2077